import label from '@/pages/datahub/label';
import { getTopicFlows } from '@/services/api/api-cues-submit';
import { ClockCircleOutlined } from '@ant-design/icons';
import { DrawerForm } from '@ant-design/pro-components';
import { Button, message, Select, Tag, Timeline } from 'antd';
import React, { useEffect, useState } from 'react';

interface ProcessLineProps {
  id: string;
}

const EventHandlingProcess: React.FC<ProcessLineProps> = ({ id }) => {
  const [open, setOpenState] = useState(false);
  const [timeLineData, setTimeLineData] = useState([]);
  const [areaOptions, setAreaOptions] = useState([]);
  const [selectArea, setSelectArea] = useState(0);
  const [flowList, setFlowList] = useState([]);

  const getFlows = async () => {
    const res = await getTopicFlows({topicId:id})
   if(res.code===0){
    return res.data;
   }
  };

  const formatOptions = () => {
    const options = flowList.map((item, index) => ({
      value: index,
      label: <div>{item?.name}<Tag style={{marginLeft:5}} color={item?.state===0?'error':'success'}>{item?.state===0?'未完成':'已完成'}</Tag></div>
    }));
    setAreaOptions(options);
  };

  const formatData = (index: number) => {
    const item = flowList[index]?.flow.map((item) => ({
      label: item.createTime,
      dot: <ClockCircleOutlined style={{ fontSize: '16px' }} />,
      color: item.state === 0 ? 'orange' : item.state === 1 ? 'green' : 'red',
      children: (
        <>
          <p>{item.name}</p>
          <p>{item.content}</p>
        </>
      ),
    }));
    setTimeLineData(item);
  };

  const onChange = (value: string) => {
    console.log(`selected ${value}`);
    formatData(Number(value));
  };

  const onSearch = (value: string) => {
    console.log('search:', value);
  };

  useEffect(() => {
    if (flowList.length > 0) {
      formatOptions();
      formatData(0);
    }
  }, [flowList]);

  return (
    <DrawerForm
      title="事件处理流程"
      trigger={<Button>事件处理流程</Button>}
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
        width: 550,
      }}
      open={open}
      onOpenChange={async (visible) => {
        setOpenState(visible);
        if (visible) {
          const flows = await getFlows();
          setFlowList(flows);
        }
      }}
      submitter={false}
      onFinish={async (values) => {}}
    >
      {flowList.length > 0 && (
        <div style={{display:'flex',flexDirection:'column',justifyContent:'center'}}>
          <Select
            defaultValue={0}
            showSearch
            placeholder="Select a person"
            optionFilterProp="label"
            onChange={onChange}
            onSearch={onSearch}
            options={areaOptions}
            />
            <Timeline mode="left" items={timeLineData} style={{marginTop:40}}/>
          </div>
        )}
      </DrawerForm>
    );
  };

  export default EventHandlingProcess;
